<template>
  <div class="many_label">
    <el-dialog title="选择多维文档" v-model="editDialogVisible" width="500px" :before-close="handleEditClose" :destroy-on-close="false">
      <!-- 回显的标签 -->
      <div>
        <p style="margin-top: 0">已添加的标签</p>
        <div class="tags_added">
          <el-tag v-for="tag in tagsAddedList" :key="tag.name" closable @close="handleClose(tag)">
            {{ tag.labelName }}
          </el-tag>
          <el-tag v-for="tag in tagsAddedList_new" :key="tag.name" closable @close="handleClose_new(tag)">
            {{ tag.labelName }}
          </el-tag>
        </div>
      </div>
      <!-- 标签 -->
      <div>
        <el-tree id="testTree" ref="tagsTree" :data="TagsList" :expand-on-click-node="false" node-key="id" :props="defaultProps">
          <template #default="{ node, data }">
            <div class="select_btn_item" @dblclick="selectTagsDBclick(data)">
              <svg-icon :icon-class="data.icon ? data.icon : ''"></svg-icon>
              <span>{{ data.labelName }}</span>
            </div>
          </template>
        </el-tree>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="handleEditClose">取消</el-button>
          <el-button type="primary" @click="handleEditSubmit">保存</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
     
<script setup lang='ts'>
import { apiFilesUserLabelQuerySys } from '@/api/enterpriseDoc/labelDocumentApi';
import { apiFilesLabelRecordQuerySelect, apiFilesLabelRecordCreate } from '@/api/enterpriseDoc/enterpriseDocApi';
import { ref, defineExpose } from 'vue';
const { proxy } = getCurrentInstance() as any;
const editDialogVisible = ref<boolean>(false); // 弹窗是否可见
const handleEditClose = () => {
  editDialogVisible.value = false;
};
const rowData = ref<any>(); // 行数据
const tagsAddedList = ref<any[]>([]); //
const tagsAddedList_new = ref<any[]>([]); //
const removeLabelIds = ref<any[]>([]); // 待删除的标签id
const open = (val: any) => {
  editDialogVisible.value = true;
  rowData.value = val;
  getTagsList();
  getLabelRecord();
};
const TagsList = ref<any[]>([]); // 标签列表
const defaultProps = ref({
  children: 'children',
  label: 'label',
  icon: 'icon'
});
// 获取标签列表
const getTagsList = async () => {
  let params = {
    sortAsc: 'sort',
    libraryId: rowData.value.libraryId
  };
  let res = await apiFilesUserLabelQuerySys(params);
  if (res.code == 200) {
    TagsList.value = res.data;
  }
};
// 获取已有标签
const getLabelRecord = async () => {
  let params = {
    fileId: rowData.value.id,
    fileType: 'enterprise',
    labelType: 'sys'
  };
  let res: any = await apiFilesLabelRecordQuerySelect(params);
  if (res.code == 200) {
    tagsAddedList.value = res.data;
  }
};
const selectTagsDBclick = (row: any) => {
  if (tagsAddedList_new.value.findIndex((item) => item.id == row.id) == -1) {
    tagsAddedList_new.value.push(row);
  }
};
// 删除
const handleClose = (tag: any) => {
  tagsAddedList.value.splice(tagsAddedList.value.indexOf(tag), 1);
  removeLabelIds.value.push(tag.labelId);
};
//删除新选中的
const handleClose_new = (tag: any) => {
  tagsAddedList_new.value.splice(tagsAddedList_new.value.indexOf(tag), 1);
};
// 保存
const handleEditSubmit = async () => {
  let labelId = tagsAddedList_new.value.map((item) => {
    return item.id;
  });
  let parmas = {
    fileId: rowData.value.id,
    fileType: 'enterprise',
    labelId: labelId,
    removeLabelId: removeLabelIds.value,
    labelType: 'sys'
  };
  let res: any = await apiFilesLabelRecordCreate(parmas);
  if (res.code == 200) {
    proxy?.$modal.msgSuccess('删除成功 !');
    editDialogVisible.value = false;
    removeLabelIds.value = [];
    tagsAddedList_new.value = [];
  }
};
defineExpose({
  open
});
</script>
<style scoped lang='scss'>
:deep(.el-dialog__header) {
  padding-top: 0 !important;
}
.many_label {
}
.select_btn_item {
  width: 100%;
}
.tags_added{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
</style>